<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--

`core-dropdown` is an element that is initially hidden and is positioned relatively to another
element, usually the element that triggers the dropdown. The dropdown and the triggering element
should be children of the same offsetParent, e.g. the same `<div>` with `position: relative`.
It can be used to implement dropdown menus, menu buttons, etc..

Example:

    <template is="auto-binding">
      <div relative>
        <core-icon-button id="trigger" icon="menu"></core-icon-button>
        <core-dropdown relatedTarget="{{$.trigger}}">
          <core-menu>
            <core-item>Cut</core-item>
            <core-item>Copy</core-item>
            <core-item>Paste</core-item>
          </core-menu>
        </core-dropdown>
      </div>
    </template>

Positioning
-----------

By default, the dropdown is absolutely positioned on top of the `relatedTarget` with the top and
left edges aligned. The `halign` and `valign` properties controls the various alignments. The size
of the dropdown is automatically restrained such that it is entirely visible on the screen. Use the
`margin`

If you need more control over the dropdown's position, use CSS. The `halign` and `valign` properties are
ignored if the dropdown is positioned with CSS.

Example:

    <style>
      /* manually position the dropdown below the trigger */
      core-dropdown {
        position: absolute;
        top: 38px;
        left: 0;
      }
    </style>

    <template is="auto-binding">
      <div relative>
        <core-icon-button id="trigger" icon="menu"></core-icon-button>
        <core-dropdown relatedTarget="{{$.trigger}}">
          <core-menu>
            <core-item>Cut</core-item>
            <core-item>Copy</core-item>
            <core-item>Paste</core-item>
          </core-menu>
        </core-dropdown>
      </div>
    </template>

@group Polymer Core Elements
@element core-dropdown
@homepage github.io
-->
<link href="../polymer/polymer.html" rel="import">

<link href="core-dropdown-overlay.html" rel="import">

<polymer-element name="core-dropdown">
<template>

  <link href="core-dropdown.css" rel="stylesheet">

  <core-dropdown-overlay id="overlay" target="{{}}" relatedTarget="{{relatedTarget}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" margin="{{margin}}" transition="{{transition}}" autoFocusDisabled="{{autoFocusDisabled}}"></core-dropdown-overlay>

  <content></content>

</template>
<script src="core-dropdown.js"></script>
</polymer-element>
